<template>
  <!-- 动态水平滑动表 -->
  <div class="most_viewed_panel">
    <div
      class="previous"
      @click="pageTurn(false)"
      :class="page == 1 ? '' : 'active'"
    >
      <i class="iconfont icon-xiangyou"></i>
    </div>
    <div class="list_container">
      <dir class="list_content" :style="{ left: `${listContentLeft}px` }">
        <div class="most_viewed_item" @click="selectItem(null)">
          <div class="section">
            <div class="icon_all" :class="!activeItem ? 'active' : ''"></div>
          </div>
          <div class="name" :class="!activeItem ? 'active' : ''">全部动态</div>
        </div>
        <div
          class="most_viewed_item"
          v-for="item in mostViewedList"
          @click="selectItem(item)"
        >
          <div class="section">
            <div
              class="avatar"
              :style="{ backgroundImage: `url(${item.avatar})` }"
              :class="activeItem && activeItem.uid == item.uid ? 'active' : ''"
              :key="item.uid"
            >
              <div class="red_dot" v-show="!item.checked"></div>
            </div>
          </div>
          <div
            class="name"
            :class="activeItem && activeItem.uid == item.uid ? 'active' : ''"
          >
            {{ item.uname }}
          </div>
        </div>
      </dir>
    </div>
    <div
      class="next"
      @click="pageTurn(true)"
      :class="page == totalPage ? '' : 'active'"
    >
      <i class="iconfont icon-xiangyou"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mostViewedList: [
        {
          avatar: "/static/video/atup_avatar0.webp",
          uname: "榄橄最后防线w",
          uid: "301401873",
          ufans: 5,
        },
        {
          avatar: "/static/video/atup_avatar1.webp",
          uname: "贝噶王",
          uid: "168296928",
          ufans: 52,
        },
        {
          avatar: "/static/video/atup_avatar2.webp",
          uname: "大街上▍逃竄的o_熊貓",
          uid: "513930",
          ufans: 88,
        },
        {
          avatar: "/static/video/atup_avatar3.webp",
          uname: "yoo一凡",
          uid: "2227911",
          ufans: 23,
        },
        {
          avatar: "/static/video/atup_avatar0.webp",
          uname: "榄橄最后防线w",
          uid: "30140187q",
          ufans: 5,
        },
        {
          avatar: "/static/video/atup_avatar1.webp",
          uname: "贝噶王",
          uid: "16829692q",
          ufans: 52,
        },
        {
          avatar: "/static/video/atup_avatar2.webp",
          uname: "大街上▍逃竄的o_熊貓",
          uid: "51393q",
          ufans: 88,
        },
        {
          avatar: "/static/video/atup_avatar3.webp",
          uname: "yoo一凡",
          uid: "222791q",
          ufans: 23,
        },
      ],
      activeItem: null,
      listContentLeft: 0, //列表左偏移
      totalPage: 0, //总页数
      total: 0, //总数
      page: 1, //当前页数
      limit: 7, //每页最大显示数
    };
  },
  mounted() {
    this.total = this.mostViewedList.length;
    this.totalPage = Math.ceil((this.total + 1) / this.limit);
  },
  methods: {
    selectItem(item) {
      this.activeItem = item;
      if (item && !item.checked) {
        this.$set(item, "checked", true);
      }
      this.$emit("getActive", item);
    },
    /**
    @type 换页方式 true下一页，false上一页
     */
    pageTurn(type) {
      if (type) {
        this.page++;
        if (this.page > this.totalPage) {
          this.page = this.totalPage;
        }
      } else {
        this.page--;
        if (this.page < 1) {
          this.page = 1;
        }
      }
      this.listContentLeft = (1 - this.page) * 576;
    },
  },
};
</script>

<style lang="scss">
* {
  list-style: none;
  padding: 0;
  margin: 0;
}
.most_viewed_panel {
  min-height: 98px;
  width: calc(100% -2px);
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  z-index: 10;
  .previous,
  .next {
    font-size: 12px;
    color: #ccd0d7;
    cursor: not-allowed;
    padding: 0 6px;
    &.active {
      color: #99a2aa;
      cursor: pointer;
      &:hover {
        color: #00a1d6;
      }
    }
  }
  .previous {
    transform: scaleX(-1);
  }
  .list_container {
    min-height: 98px;
    flex: 1;
    overflow: hidden;
    position: relative;
    .list_content {
      display: flex;
      justify-content: start;
      transition: left 0.35s;
      padding: 16px 0;
      position: relative;
      & > * {
        width: 62px;
        margin: 0 5px 0 5px;
      }
      .most_viewed_item {
        position: relative;
        flex-shrink: 0;
        cursor: pointer;
        &:hover .name {
          color: #00b5e5;
        }
        .section {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 5px;
          .icon_all {
            width: 36px;
            height: 36px;
            min-height: 36px;
            border-radius: 50%;
            position: relative;
            background-color: #b9e9f9;
            margin: 1px;
            box-shadow: 0 0 0 1px #fff;
            border: 2px solid #fff;
            box-sizing: content-box;
            background-image: url("/static/video/风车.png");
            background-size: 24px 24px;
            background-position: center center;
            background-repeat: no-repeat;
            &.active {
              box-shadow: 0 0 0 1px #00a1d6;
            }
          }
          .avatar {
            width: 36px;
            height: 36px;
            min-height: 36px;
            border-radius: 50%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            // background-image: url("/static/video/atup_avatar3.webp");
            position: relative;
            margin: 1px;
            border: 2px solid #fff;
            box-sizing: content-box;
            &.active {
              box-shadow: 0 0 0 1px #00a1d6;
            }
            .red_dot {
              width: 6px;
              height: 6px;
              border: 1px solid #fff;
              background-color: #fa5a58;
              border-radius: 50%;
              position: absolute;
              bottom: 1px;
              right: 1px;
              box-sizing: content-box;
            }
          }
        }
        .name {
          color: #6d757a;
          letter-spacing: 0;
          text-align: center;
          text-overflow: ellipsis;
          overflow: hidden;
          word-wrap: break-word;
          display: flex;
          font-size: 12px;
          line-height: 16px;
          max-height: 2.66666666667em;
          justify-content: center;
          cursor: pointer;
          &.active {
            color: #00b5e5;
          }
        }
      }
    }
  }
}
</style>